<template>
	<div style="line-height: 40px;">


		<!-- 添加按钮 -->
		<el-button type="success" @click="addButtonVisible = true" style="float: right; margin-bottom: 10px; margin-right: 20px;"
		 plain><strong>+</strong></el-button>
		<el-dialog title="客户添加" :visible.sync="addButtonVisible">
			<el-form :model="addform">
				<el-form-item label="职员编号" :label-width="formLabelWidth">
					<el-input v-model="form.num" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="职员姓名" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<!-- <el-form-item label="部门" :label-width="formLabelWidth">
					<el-input v-model="form.department" autocomplete="off"></el-input>
				</el-form-item> -->
				<el-form-item label="部门选择" :label-width="formLabelWidth">
					<el-select v-model="form.department" placeholder="">
						<el-option label="董事会" value="董事会"></el-option>
						<el-option label="运输部" value="运输部"></el-option>
						<el-option label="业务部" value="业务部"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="性别" :label-width="formLabelWidth">
					<el-input v-model="form.gender" autocomplete="off"></el-input>
				</el-form-item> -->
				<el-form-item label="性别" :label-width="formLabelWidth">
					<el-radio-group v-model="form.gender">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="工资" :label-width="formLabelWidth">
					<el-input v-model="form.salary" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="账号" :label-width="formLabelWidth">
					<el-input v-model="form.acount" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" :label-width="formLabelWidth">
					<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="分配权限" :label-width="formLabelWidth">
					<el-select v-model="form.rid" placeholder="">
						<el-option label="管理员" value=1></el-option>
						<el-option label="业务员" value=2></el-option>
						<el-option label="操作员" value=3></el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="addButtonVisible = false">取 消</el-button>
				<el-button type="primary" @click="addY()">确认添加</el-button>
			</div>
		</el-dialog>
		&nbsp;


		<!-- 搜索框 -->
		<el-form :inline="true" :model="formInline" class="demo-form-inline" style="float: left; margin-left: 20px;">

			<!-- 下拉框 -->
			<el-select v-model="formInline.department" placeholder="通过部门查看" style="float: left;">
				<el-option label="全部" value=""></el-option>
				<el-option label="董事会" value="董事会"></el-option>
				<el-option label="运输部" value="运输部"></el-option>
				<el-option label="业务部" value="业务部"></el-option>
			</el-select>
			<el-form-item label="职员编号" style="margin-left: 20px;">
				<el-input v-model="formInline.num" placeholder="优先编号查询"></el-input>
			</el-form-item>
			<el-form-item label="职员姓名">
				<el-input v-model="formInline.name" placeholder=""></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="pageInfo.list" style="width: 100%" stripe :default-sort="{prop: 'id', order: 'id'}">
			<!-- 多选框 -->
			<el-table-column type="selection" width="60">
			</el-table-column>

			<el-table-column label="ID" prop="id" width="100">
			</el-table-column>
			<el-table-column label="职员编号" prop="num" width="100">
			</el-table-column>
			<el-table-column label="姓名" prop="name" width="100">
			</el-table-column>
			<el-table-column label="部门" prop="department" width="100">
			</el-table-column>
			<el-table-column label="性别" prop="gender" width="100">
			</el-table-column>
			<el-table-column label="工资" prop="salary" width="150">

			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<!-- 修改按钮 -->
					<el-button type="primary" @click="handleEdit(scope.$index, scope.row)" plain>编辑</el-button>
					<el-dialog title="信息修改" :visible.sync="editButtonVisible">
						<el-form :model="updateform">
							<el-form-item label="职员编号" :label-width="formLabelWidth">
								<el-input v-text="updateform.num" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="职员姓名" :label-width="formLabelWidth">
								<el-input v-model="updateform.name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="部门" :label-width="formLabelWidth">
								<el-select v-model="updateform.department" placeholder="选择部门" :label-width="formLabelWidth">
									<el-option label="全部" value=""></el-option>
									<el-option label="董事会" value="董事会"></el-option>
									<el-option label="运输部" value="运输部"></el-option>
									<el-option label="业务部" value="业务部"></el-option>
								</el-select>
								<!-- <el-input v-model="updateform.department" autocomplete="off"></el-input> -->
							</el-form-item>

							<el-form-item label="性别" :label-width="formLabelWidth">
								<!-- <el-input v-model="updateform.gender" autocomplete="off"></el-input> -->
								<el-radio-group v-model="updateform.gender">
									<el-radio label="男"></el-radio>
									<el-radio label="女"></el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="工资" :label-width="formLabelWidth">
								<el-input v-model="updateform.salary" autocomplete="off"></el-input>
							</el-form-item>

						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="addButtonVisible = false">取消</el-button>
							<el-button type="primary" @click="updateY()">确认修改</el-button>
						</div>
					</el-dialog>
					&nbsp;

					<!-- 删除按钮 -->
					<el-button type="danger" @click="handleDelete(scope.$index, scope.row)" plain>删除</el-button>
					<el-dialog title="确认删除" :visible.sync="deleteButtonVisible" width="30%" :before-close="handleClose">
						<span>是否删除此条客户信息</span>
						<span slot="footer" class="dialog-footer">
							<el-button @click="deleteButtonVisible = false">取 消</el-button>
							<el-button type="primary" @click="deleteY(scope.row)">确 定</el-button>
						</span>
					</el-dialog>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="height: 50px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.PageNum"
			 :page-sizes="[4,6]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addButtonVisible: false,
				editButtonVisible: false,
				deleteButtonVisible: false,
				// 分页
				currentPage: 1,
				pageSize: 4,
				pageInfo: {},

				formInline: {
					num: '',
					name: '',
					department: '',
				},
				tableData: [],
				form: {
					num: '',
					name: '',
					department: '',
					gender: '',
					salary: '',
					acount: '',
					password: '',
					rid: '',
				},
				updateform: {
					id: '',
					num: '',
					name: '',
					department: '',
					gender: '',
					salary: '',
				},
				formLabelWidth: '120px',
				inputId: '',
				inputName: '',
				inputTel: '',

			}
		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页${val}条`)
				this.pageSize = val;
				this.userList();
			},

			handleCurrentChange(val) {
				this.currentPage = val;
				this.userList();
			},
			handleEdit(index, row) {
				this.editButtonVisible = true,
					this.updateform = {
						...row
					}
			},
			updateY() {
				this.axios.put("http://localhost:8080/staffs/update", {
					id: this.updateform.id,
					name: this.updateform.name,
					num: this.updateform.num,
					department: this.updateform.department,
					gender: this.updateform.gender,
					salary: this.updateform.salary,
				}).then(res => {
					this.userList();
					this.editButtonVisible = false;
				})
			},
			handleDelete(index, row) {
				this.deleteButtonVisible = true;
				this.rowId = row.id;
			},
			deleteY() {
				this.axios.delete("http://localhost:8080/staffs/" + this.rowId).then(res => {
					this.userList();
					this.deleteButtonVisible = false;
				})
			},

			onSubmit() {
				this.axios.post("http://localhost:8080/staffs/findByCondition", {
					name: this.formInline.name,
					num: this.formInline.num,
					department: this.formInline.department,
				}).then(res => {
					this.pageInfo.list = res.data.data;
					console.log(this.pageInfo.list)
				})
				console.log(this.formInline);

			},
			userList() {
				this.axios.get("http://localhost:8080/staffs/" + this.currentPage + "/" + this.pageSize).then(res => {
					console.log(res.data.data.list)
					this.pageInfo = res.data.data;

				})
			},
			addY() {
				this.axios.post("http://localhost:8080/staffs/", {
					num: this.form.num,
					name: this.form.name,
					department: this.form.department,
					gender: this.form.gender,
					salary: this.form.salary,
					acount: this.form.acount,
					password: this.form.password,
					rid: this.form.rid,
				}).then(res => {
					this.addButtonVisible = false;
					this.userList();
					this.form.num = '';
					this.form.name = '';
					this.form.department = '';
					this.form.gender = '';
					this.form.salary = '';
					this.form.acount = '';
					this.form.password = '';
					this.form.rid = '';
				})
			}

		},
		created() {
			this.userList();
		}
	}
</script>
